<script setup lang="ts"></script>
<template>
  <!-- 页面右侧结构 -->
  <!-- 待评价页面 -->
  <div class="evaluate">
    <div class="evaluate-nav">
        <a href="javascript:;" class="evaluate-active">待评价</a>
        <a href="javascript:;">已评价</a>
    </div>
    <div class="goods-deta">
      <ul>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
        <li class="data-li">
          <img src="../../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped>
.evaluate {
  width: 995px;
  height: 100%;
  background-color: #fff;
  .evaluate-nav {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
    a {
      display: inline-block;
      width: 80px;
      height: 50px;
      color: #333;
      font-size: 16px;
      line-height: 46px;
      text-align: center;
      text-decoration: none;
      border: 1px solid #f5f5f5;
      border-top: none;
      border-bottom: none;
    }
    .evaluate-active {
        border-top: 2px solid #27ba9b;
        border-right: 1px solid #f5f5f5;
        border-bottom: none;
      }
  }
  .goods-deta {
    width: 995px;
    height: 100%;
    padding-left: 20px;
    padding-right: 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    ul {
      width: 995px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .data-li {
      width: 216px;
      height: 336px;
      background-color: #fff;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center; 
      &:nth-child(-n + 4) {
        margin-top: 20px;
      }
      img {
          width: 148px;
          height: 122px;
        }
        .data-sty {
          font-size: 16px;
          color: #333;
        }
        .data-price {
          color: #CF4444;
          font-size: 18px;
        }
        .data-say {
          color: #999;
          font-size: 14px;
        }
        a {
          display: inline-block;
          background-color: #27ba9b;
          border-radius: 4px;
          width: 100px;
          height: 32px;
          text-align: center;
          line-height: 30px;
          color: #fff;
        }
    }
    }
    
  }
}
</style>
